<template>
  <div class="demo-use-event">
    <h6>
      当前滚动位置:{{
        state.currentPart ? `${state.currentPart} - ${state.count}` : "无"
      }}
    </h6>

    <div>
      <label for="showHeader">showHeader:</label>
      <input type="checkbox" v-model="state.showHeader" />
    </div>

    <DemoUseEventTable
      :showHeader="state.showHeader"
      @scroll="onScroll"
      @handlePart="handlePart"
    ></DemoUseEventTable>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import DemoUseEventTable from "./DemoUseEventTable";

export default {
  name: "demo-use-event",
  components: {
    DemoUseEventTable
  },
  setup() {
    const state = reactive({
      showHeader: true,
      currentPart: null,
      count: 0
    });

    return {
      state,
      onScroll: (e, part) => {
        if (part === state.currentPart) {
          state.count++;
        } else {
          state.count = 0;
        }
      },
      handlePart: part => {
        state.currentPart = part;
      }
    };
  }
};
</script>

<style>
</style>